<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="sn" left-arrow fixed @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div class="selectBox">
        <!-- 发电量、耗电量 -->
        <div class="sel" @click="showPicker1 = true">{{value1}}</div>
        <van-popup v-model="showPicker1" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
            @cancel="showPicker1 = false"
            @confirm="onConfirm1"
          />
        </van-popup>
        <!-- 年月日选择框 -->
        <div class="sel" @click="showPicker2 = true" >{{timeVal}}</div>
        <van-popup v-model="showPicker2" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
          />
        </van-popup>
      </div>
      <div id="batChart" :style="{width: '100%', height: '280px'}"></div>

      <div class="batteryPower_b">
        <van-cell-group>
          <van-cell :title="$t('BatteryType')" :value="batteryInfo.batteryType==1?$t('Lithuim'):batteryInfo.batteryType===0?$t('LeadAcid'):' - '" />
          <van-cell :title="$t('BatteryCapacity')" :value="batteryInfo.batteryCapacity  | numFilter(1,'%')" />
          <van-cell :title="$t('Voltage')" :value="batteryInfo.voltage  | numFilter(1,'V')" />
          <van-cell :title="$t('Current')" :value="batteryInfo.current  | numFilter(1,'A')" />
          <van-cell :title="$t('Power')" :value="batteryInfo.power  | numFilter(1,'W')" />
          <van-cell :title="$t('Temperature')" :value="batteryInfo.temperature  | numFilter(1,'℃')" />
          <van-cell :title="$t('MasterSN')" :value="batteryInfo.masterSN | ifNull" />
          <van-cell :title="$t('Mainversion')" :value="batteryInfo.batteryMasterVer | ifNull" />
          <div v-for="(dataM,i) in bat_vers_main" :key="i">
            <van-cell :title="$t('SlaveVersion')+(i+1)" :value="dataM.val | ifNull" />
          </div>
          <div v-for="(dataS,i) in bat_vers_second" :key="i+'S'">
            <van-cell :title="$t('SlaveSN')+(i+1)" :value="dataS.val | ifNull" />
          </div>
          <van-cell :title="$t('LastUpdate')" :value="batteryInfo.lastUpdateTimes | ifNull" />
        </van-cell-group>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      from:this.$route.query.from,
      sn:localStorage.getItem('sn'),
      isLoading:false,
      value1: this.$t('BatteryVoltage'),
      value1Code:0,
      showPicker1: false,
      showPicker2: false,
      columns1: [this.$t('BatteryVoltage'), this.$t('BatteryCurrent'), this.$t('BatteryPower'), this.$t('Temperature'), this.$t('BatteryCapacity')],
      currentDate:new Date(),
      timeVal:moment(new Date()).format('YYYY/MM/DD'),
      batteryInfo:{},
      bat_vers_main:[],
      bat_vers_second:[],
      echartData:[],
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/agentbattery'});
    },
    onConfirm1(value,code) {
      this.value1 = value;
      this.value1Code=code;
      this.showPicker1 = false;
      this.switchChart(this.echartData);
    },
    onConfirm2(value) {
      this.showPicker2 = false;
      this.timeVal=moment(value).format('YYYY/MM/DD');
      this.getBatteryData();
    },
    async getBatteryInfo(){
      let data = await this.API.getBatteryInfo(localStorage.getItem('domain'),{'tokenId':localStorage.getItem("tokenId"),'inverterSn':localStorage.getItem("sn"),'siteId':localStorage.getItem("siteId")});
      if(data.success){
        this.batteryInfo = data.result[0];
        let batterySlaveNum=data.result[0].batterySlaveNum;
        let batMain=[
          data.result[0].batterySlaveVer1,
          data.result[0].batterySlaveVer2,
          data.result[0].batterySlaveVer3,
          data.result[0].batterySlaveVer4,
          data.result[0].batterySlaveVer5,
          data.result[0].batterySlaveVer6,
          data.result[0].batterySlaveVer7,
          data.result[0].batterySlaveVer8
        ];
        let batSecond=[data.result[0].slave1_2SN,data.result[0].slave3_4SN,data.result[0].slave5_6SN,data.result[0].slave7_8SN];
        for(let i=0;i<batterySlaveNum/2;i++){
          this.bat_vers_second.push({'val':batSecond[i]});
          this.bat_vers_main.push({'val':batMain[2*i+1]});
        }
      }
    },
    async getBatteryData(){
      this.comm.loadingShow();
      let data = await this.API.getBatteryData(localStorage.getItem('domain'),{
        'tokenId':localStorage.getItem('tokenId'),
        'siteId':localStorage.getItem('siteId'),
        'userId':localStorage.getItem('userId'),
        'sn':localStorage.getItem('sn'),
        'wifiSN':localStorage.getItem('wifiSN'),
        'datestr':this.timeVal.split('/').join('-')
      });
      this.echartData = data.result;
      this.switchChart(this.echartData);
    },
    switchChart(datas){
      let color=['#EB6206','#6CA918','#FDB60E','#A27612','#18A75E'];
      let [times,voltage,current,power,temperature,capacity]=[[],[],[],[],[],[]];
      let names=[this.$t('BatteryVoltage'),this.$t('BatteryCurrent'),this.$t('BatteryPower'),this.$t('Temperature'),this.$t('BatteryCapacity')];
      for(let i=0;i<datas.length;i++){
        times.push(datas[i].time);
        voltage.push(datas[i].batVoltage1||0);
        current.push(datas[i].current||0);
        power.push(datas[i].batPower1||0);
        temperature.push(datas[i].temperature||0);
        capacity.push(datas[i].batteryCapacity||0);
      }
      let dataY=[voltage,current,power,temperature,capacity];
      this.commChart.barChart2('batChart',color[this.value1Code],this.value1Code,times,names[this.value1Code],dataY[this.value1Code]);
    },
    onRefresh(){
      this.isLoading=false;
      this.bat_vers_main=[];
      this.bat_vers_second=[];
      this.getBatteryData();
      this.getBatteryInfo();
    }
  },
  mounted(){
    this.getBatteryData();
    this.getBatteryInfo();
    this.fifteenRefresh=setInterval(()=>{
      this.getBatteryData();
      this.getBatteryInfo();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">
.selectBox{
  width: 100%;
  margin-top: 20px;
  display: flex;
}
.batteryPower_b{
  width: 100%;
  text-align: left;
}
</style>
